<template>
  <div id="private-collections">
    <Divider orientation="right">个人页面</Divider>
    <div class="collection">
      <p class="collection_p">我的收藏</p>
      <div v-show="collections.length">
        <!-- <div class="test" v-for="collection in collections" :key="collection.id">
          <img :src="collection.url" alt>
        </div>-->
        <div class="wrap_img" v-show="collections.length" style="clear:both">
          <img
            :class="[co_img,co_imgp]"
            v-for="collection in collections"
            :key="collection.id"
            :src="collection.src"
            alt
          >
        </div>
      </div>
    </div>
    <Divider/>
    <div class="coll_foot">
      <ul>
        <li>关于我们</li>
        <li>欢迎加入</li>
        <li>条款</li>
        <li>安全</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "privateCollection",
  props: {
    collections_img: Array
  },
  data() {
    return {
      collections: this.collections_img,
      screenWidth: document.body.clientWidth,
      co_img: "",
      co_imgp: "co_imgp"
    };
  },
  created() {
    this.screenWidth = document.body.clientWidth;
    if (this.screenWidth < 999) {
      this.co_img = "co_img2 ";
    } else if (this.screenWidth > 999) {
      this.co_img = "co_img1 ";
    }
  },
  watch:{
    collections_img(newValue,oldValue){
      this.collections=newValue
    }
  },
  methods: {
    fitWidth() {
      window.onresize = () => {
        this.screenWidth = document.body.clientWidth;
        if (this.screenWidth < 999 && this.screenWidth > 650) {
          this.co_img = "co_img2 ";
        } else if (this.screenWidth > 999) {
          this.co_img = "co_img1 ";
        } else {
          this.co_img = "co_img3 ";
        }
      };
    }
  },
  mounted() {
    this.fitWidth();
  }
};
</script>

<style scope>
#private-collections {
  width: 98%;
  margin: 0 auto;
}
.collection_p {
  font-size: 16px;
  font-weight: 600;
}
.coll_foot ul li {
  float: right;
  display: inline;
  margin: 0 10px;
}
.coll_foot {
  margin-bottom: 60px;
}
.co_img1 {
  width: 30%;
}
.co_img2 {
  width: 45%;
}
.co_img3 {
  width: 97%;
}
.wrap_img {
  float: left;
  box-sizing: border-box;
}
.co_imgp {
  height: 300px;
  max-width: 100%;
  min-width: 290px;
  margin: 1.6%;
  background-color: darkgrey;
}
</style>
